<template>
  <div class="home acea-row">
    <div class="left">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="setting" />
            组件
          </span>
          <a-collapse accordion :bordered="false" v-model="activeKey">
            <a-collapse-panel :header="item.title" :style="activeKey==item.id?customStyle:''" v-for="(item) in tmp" :key="item.id.toString()">
              <div class="list acea-row">
                <draggable 
                class="acea-row row-middle"
                :forceFallback="true" 
                v-model="item.children" 
                :sort="false" 
                handle=".item" 
                animation="500"  
                :group="{ name: 'content', pull: 'clone', put: false }" 
                @clone="(e)=>clone(e,item.id)"
                :move="move"
                >
                  <div class="item acea-row row-column row-middle" :ghostClass="item.ghostClass" v-for="(item2,index2) in item.children" :key="index2">
                    <div class="pic"><img :src="item2.pic" alt=""></div>
                    <p class="text">{{item2.title}}</p>
                  </div>
                </draggable>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="container acea-row row-middle row-center">
      <div class="header acea-row row-middle">
        <a-button :loading="showViewLoading" type="primary" @click="showView">预览</a-button>
        <!-- <a-button :loading="buildLoading" type="danger" @click="buildView" style="margin-left:10px;">导出</a-button> -->
      </div>
      <tmpContent />
    </div>
  </div>
</template>

<script>
import axios from "axios"
import tmp from '@/utils/tmp-config.js'
import draggable from 'vuedraggable'
import tmpContent from '@/components/tmp-content'

export default {
  components:{
    draggable,
    tmpContent
  },
  data() {
    return {
      tmp,
      activeKey:0,
      customStyle:"background-color: #f7f8fa;",
      showViewLoading:false,
      buildLoading:false
    }
  },
  created() {
    this.$store.commit("drawing/getSessionContent")
  },
  methods: {
    clone(e,pid){
      // console.log("clone",e)
      let p = this.tmp.find(e=>e.id==pid)
      let ghostClass = p.children[e.oldIndex].ghostClass
    },
    move(e){
      // console.log("move",e)
    },
    showView(){
      let content = this.content
      // this.showViewLoading = true
      sessionStorage.setItem("view-content",JSON.stringify(content))
      window.open("/view")
      // axios.post("/api/changeContent",{content}).then(e=>{
      //   // console.log(e)
      //   this.showViewLoading = false
      //   if(e.data.status == 200){
      //     window.open("http://localhost:8080/view")
      //   }
      // })
    },
    buildView(){
      let content = this.content
      this.buildLoading = true
      axios.post("/api/build",{content}).then(e=>{
        console.log(e)
        this.buildLoading = false
        if(e.data.status == 200){
          
        }
      })
    }
  },
  computed:{
    content(){
      return this.$store.state.drawing.content
    },
    attr(){
      return this.$store.state.drawing.attr
    }
  }
}
</script>

<style scoped>
  .home{
    background-color: #f7f8fa;
  }
  .home .left{
    width: 240px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 2px 0 4px 0 rgb(29 31 37 / 10%);
  }
  .home .left .list{
  }
  .home .left .list .acea-row{
    width: 100%;
  }
  .home .left .list .item{
    width: 70px;
    height: 70px;
    margin: 0 6px 6px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid transparent;
  }
  .home .left .list .item .pic{
    width: 70px;
    height: 48px;
  }
  .home .left .list .item .text{
    font-size: 12px;
    color: #15171a;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    width: 70px;
    padding: 0 4px;
    text-align: center;
  }
  .home .left .list .item:hover{
    background-color: #f0f2f5;
    border: 1px solid #006eff;
    cursor: pointer;
  }
  .home .left >>> .ant-collapse-content-box{
    padding: 4px 6px 10px;
  }
  .home .left >>> .ant-tabs-bar{
    margin: 0;
  }
  .home .left >>> .ant-collapse > .ant-collapse-item{
    background-color: #fff;
  }
  .home .container{
    flex: 1;
    margin-right: 300px;
    position: relative;
  }
  .home .container .header{
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>